import Map from '@/components/AMap';
import { useEffect, useRef } from 'react';
import styles from './index.less';

const TrackInfo = (props) => {
  const { lineId, value } = props;
  const map = useRef();
  useEffect(() => {
    (async () => {
      map.current = new Map({
        domId: 'line_map',
      });
      await map.current.load();
      if (value && value.length) {
        const line = map.current.loadLine(
          value.split(';').map((item) => {
            return { lat: item.split(',')[1], lng: item.split(',')[0] };
          }),
        );
      }
      map.current.mapInstance.setFitView();
    })();
  }, []);
  return (
    <div className={styles.trackInfo}>
      <section className={styles.section}>
        <div className={styles.content}>
          <div className={styles.lineMap} id="line_map"></div>
        </div>
      </section>
    </div>
  );
};

export default TrackInfo;
